<!--
 * @Author: xjt
 * @Date: 2021-06-26 14:56:24
 * @LastEditTime: 2021-06-26 16:38:15
 * @Description: 人员综合管理新增编辑页
 * @LastEditors: xjt
-->
<template>
  <el-dialog
    custom-class="small-padding-dialog el-common-dialog"
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    width="70%"
    v-loading="loading"
  >
    <div class="basic-form multiple-manage-edit">
      <div class="searchPanel mb20">
        <slot name="search">
          <el-input
            class="searchInput"
            v-halfCharCode
            placeholder="请输入'一码通'登记的姓名"
            v-model="queryParam.name"
            clearable
          >
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
          <el-input
            class="searchInput"
            v-halfCharCode
            placeholder="请输入'一码通'登记的证件号码"
            v-model="queryParam.cardNo"
            clearable
          >
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
          <el-input
            class="searchInput"
            v-halfCharCode
            placeholder="请输入'一码通'登记的手机号码"
            v-model="queryParam.telPhone"
            clearable
          >
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
          <el-button class="searchBtn" type="primary" slot="append" @click="getSynPersonInfo()">一键同步</el-button>
        </slot>
      </div>
      <el-form label-position="right" ref="form" class="form-wrap" size="small" :model="formData">
        <div class="card-title full">基础信息</div>
        <el-form-item label="隔离点名称" prop="hotelName">
          <el-select v-model="formData.hotelBaseInfoId" placeholder="请选择">
            <el-option
              v-for="item in hotelNameOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >{{ item.label }}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="旅客入住来源" prop="dataSource">
          <el-select v-model="formData.dataSource" placeholder="请选择">
            <el-option
              v-for="item in getDict('move_person_type')"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >{{ item.label }}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="批次号" prop="batchNum">
          <el-input v-model="formData.batchNum" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="formData.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-select v-model="formData.gender" placeholder="请选择">
            <el-option
              v-for="item in getDict('gender')"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >{{ item.label }}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="formData.age" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="证件类型" prop="cardType">
          <el-select v-model="formData.cardType" placeholder="请输入">
            <el-option
              v-for="item in cardTypeOptions"
              :value="item.value"
              :key="item.value"
              :label="item.label"
            >{{ item.label }}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="证件号码" prop="cardId">
          <el-input v-model="formData.cardId" placeholder="请输入" />
        </el-form-item>
        <!-- <el-form-item label="护照" prop="passportNum">
          <el-input v-model="formData.passportNum" placeholder="请输入" />
        </el-form-item>-->
        <el-form-item label="电话号码" prop="telPhone">
          <el-input v-model="formData.telPhone" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="目的地详细地址" prop="destinationAddr">
          <el-input v-model="formData.destinationAddr" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="来自所在国或地区" prop="comeCountryCity">
          <el-input v-model="formData.comeCountryCity" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="入境方式" prop="entryWay">
          <el-select v-model="formData.entryWay" placeholder="请输入">
            <el-option
              v-for="item in entryWayOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >{{ item.label }}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="入境时间" prop="entryTime">
          <!-- <el-input v-model="formData.entryTime" placeholder="请输入" /> -->
          <el-date-picker v-model="formData.entryTime" type="datetime"  format="yyyy-MM-dd HH:mm:ss" valueFormat="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" />
        </el-form-item>
        <!--     <el-form-item label="核酸检验情况" prop="nucleinTestCase">
          <el-select v-model="formData.nucleinTestCase" placeholder="请输入">
            <el-option
              v-for="item in nucleinTestOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >{{ item.label }}</el-option>
          </el-select>
        </el-form-item>-->
        <el-form-item label="风险等级" prop="riskLevel">
          <el-select v-model="formData.riskLevel" placeholder="请输入">
            <el-option
              v-for="item in riskLevelOptions"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            >{{ item.label }}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="国籍或地区" prop="nationCity">
          <!-- <ProvinceCity v-model="formData.nationCity" /> -->
          <el-cascader
            v-model="formData.nationCity"
            :options="nationCityOptions"
            ref="nationCity"
            @change="getName"
          />

          <!-- <el-input v-model="formData.aaa" placeholder="请输入" /> -->
        </el-form-item>
        <el-form-item label="目的地" prop="destinationCity">
          <el-cascader
            ref="destinationCity"
            v-model="formData.destinationCity"
            :options="destinatOptions"
            @change="getName"
          />
          <!-- destinationProvince/destinationCity -->
          <!-- <el-input v-model="formData.bbb" placeholder="请输入" /> -->
        </el-form-item>
        <!-- <el-form-item label="是否在校留学生" prop="isOverStudent">
          <el-select v-model="formData.isOverStudent" placeholder="请输入">
            <el-option
              v-for="item in YesOrNoOptions"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            >{{ item.label }}</el-option>
          </el-select>
        </el-form-item>-->
        <!--   <el-form-item label="是否有境外旅居史" prop="isYjwLjs">
          <el-select v-model="formData.isYjwLjs" placeholder="请输入">
            <el-option
              v-for="item in YesOrNoOptions"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            >{{ item.label }}</el-option>
          </el-select>
        </el-form-item>-->
        <!-- <el-form-item label="是否机组人员" prop="isAircrew">
          <el-select v-model="formData.isAircrew" placeholder="请输入">
            <el-option
              v-for="item in YesOrNoOptions"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            >{{ item.label }}</el-option>
          </el-select>
        </el-form-item>-->
        <!--      <el-form-item label="是否入境奔丧人员" prop="isMourning">
          <el-select v-model="formData.isMourning" placeholder="请输入">
            <el-option
              v-for="item in YesOrNoOptions"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            >{{ item.label }}</el-option>
          </el-select>
        </el-form-item>-->
        <!--  <el-form-item label="是否孕妇" prop="isGravida">
          <el-select v-model="formData.isGravida" placeholder="请输入">
            <el-option
              v-for="item in YesOrNoOptions"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            >{{ item.label }}</el-option>
          </el-select>
        </el-form-item>-->
        <!-- <el-form-item label="是否有明显的身体疾病" prop="isBodyDisease">
          <el-select v-model="formData.isBodyDisease" placeholder="请输入">
            <el-option
              v-for="item in YesOrNoOptions"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            >{{ item.label }}</el-option>
          </el-select>
        </el-form-item>-->
        <!--         <el-form-item label="是否有基础疾病" prop="isBasicDisease">
          <el-select v-model="formData.isBasicDisease" placeholder="请输入">
            <el-option
              v-for="item in YesOrNoOptions"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            >{{ item.label }}</el-option>
          </el-select>
        </el-form-item>-->
        <!-- <el-form-item label="是否属于前科人员" prop="isCriminalPerson">
          <el-select v-model="formData.isCriminalPerson" placeholder="请输入">
            <el-option
              v-for="item in YesOrNoOptions"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            >{{ item.label }}</el-option>
          </el-select>
        </el-form-item>-->
        <!-- <el-form-item label="是否存在精神异常或者心理异常" prop="isSpiritHeartExce">
          <el-select v-model="formData.isSpiritHeartExce" placeholder="请输入">
            <el-option
              v-for="item in YesOrNoOptions"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            >{{ item.label }}</el-option>
          </el-select>
        </el-form-item>-->
        <el-form-item class="full" label="备注" prop="remark">
          <el-input v-model="formData.remark" placeholder="请输入" />
        </el-form-item>
        <div class="card-title full">紧急联系人</div>
        <el-form-item label="紧急联系人关系" prop="emergencyContactType">
          <el-input v-model="formData.emergencyContactType" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="紧急联系人姓名" prop="emergencyContactName">
          <el-input v-model="formData.emergencyContactName" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="紧急联系人电话" prop="emergencyContactPhone">
          <el-input v-model="formData.emergencyContactPhone" placeholder="请输入" />
        </el-form-item>
        <!-- <div class="card-title full">信息核实情况</div>
        <el-form-item label="核验是否通过" prop="verifyResult">
          <el-select v-model="formData.verifyResult" placeholder="请输入">
            <el-option
              v-for="item in YesOrNoOptions1"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            >{{ item.label }}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="核验人" prop="verifyName">
          <el-input v-model="formData.verifyName" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="核验结果说明" prop="verifyRemark">
          <el-input v-model="formData.verifyRemark" placeholder="请输入" />
        </el-form-item>-->
        <div class="card-title full">证件（正反面拍照上传）</div>
        <div class="full">
          <v-upload
            type="image"
            ref="upload"
            :busId="formData.personId"
            modelType="photo"
            :isView="false"
            :autoLoadFiles="false"
          ></v-upload>
        </div>
        <!-- <div class="card-title full">行程列表</div>
        <div class="full">
          <el-button @click="editRouteCol('add')" type="primary" class="add-route-btn">
            <i class="el-icon-plus" />新增
          </el-button>
          <el-table style="width: 100%" :data="routeslist">
            <el-table-column type="index" width="50" />
            <el-table-column prop="outAddr" label="出发地" width="180">
              <template slot-scope="scope">
                <ProvinceCity v-model="scope.row.outAddr" />
              </template>
            </el-table-column>
            <el-table-column prop="outDate" label="出发时间" width="180">
              <template slot-scope="scope">
                <el-date-picker v-model="scope.row.outDate" type="datetime" placeholder="选择日期时间" />
              </template>
            </el-table-column>
            <el-table-column prop="getAddr" label="到达地">
              <template slot-scope="scope">
                <ProvinceCity v-model="scope.row.getAddr" />
              </template>
            </el-table-column>
            <el-table-column prop="getDate" label="到达时间">
              <template slot-scope="scope">
                <el-date-picker type="datetime" v-model="scope.row.getDate" placeholder="选择日期时间" />
              </template>
            </el-table-column>
            <el-table-column prop="tripTrafficWay" label="出行交通方式">
              <template slot-scope="scope">
                <el-select v-model="scope.row.tripTrafficWay">
                  <el-option
                    v-for="item in tripWayOptions"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  >{{ item.label }}</el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="flightNumber" label="出行交通方式牌号">
              <template slot-scope="scope">
                <el-input v-model="scope.row.flightNumber" placeholder="请输入" />
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button @click="editRouteCol('move')">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>-->
      </el-form>
    </div>
    <div slot="footer">
      <!--<el-button @click="$bus.$emit('operationLog',formData.billId)" v-if="type==='preview'">操作日志</el-button>-->
      <el-button
        v-if="type !== 'preview'"
        type="primary"
        @click="save"
      >{{ type == "approval" ? "审 批" : "提 交" }}</el-button>
      <el-button @click="dialogVisible = false">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import ProvinceCity from "@/components/ProvinceCity";
import {
  getPersonInfoById,
  getProvinceCity,
  getDicts,
  getDestination,
  savePersonEditor,
  getSynPersonInfo,
  getContact,
} from "@/views/yq-personnel/api/check.js";
import { getListHotel } from "@/views/yq-hotel/api/room.js";
import moment from "moment";
import { getDict } from "@/utils";

export default {
  name: "editDialog",
  components: {
    ProvinceCity,
  },
  props: {
    // 场景
    scene: {
      type: String,
      default: "add",
    },
  },
  created() { },
  mounted() {
    if (this.destinatOptions.length === 0) {
      getDestination().then((res) => {
        this.destinatOptions = res.data.data.map((a) => ({
          value: a.id,
          label: a.areaName,
          children: this.getOptionChildren(a.children),
        }));
      });
    }

    if (this.nationCityOptions.length === 0) {
      getProvinceCity().then((res) => {
        if (res) {
          this.nationCityOptions = res.data.data.map((a) => ({
            value: a.id,
            label: a.areaName,
            children: this.getOptionChildren(a.children),
          }));
        }
      });
    }

    if (this.hotelNameOptions.length === 0) {
      getListHotel().then((res) => {
        if (res) {
          this.hotelNameOptions = res.data.data.map((a) => ({
            value: a.hotelBaseInfoId,
            label: a.hotelName,
          }));
        }
      });
    }
  },
  data() {
    return {
      formData: {},
      routeslist: [],
      dialogVisible: false,
      dialogTitle: "编辑",
      options: [],
      tripOptions: [],
      flightOptions: [],
      type: "",
      hotelNameOptions: [],
      nationCityOptions: [],
      Dicts: {},
      destinatOptions: [],
      cardTypeOptions: getDict("card_type"),
      entryWayOptions: getDict("entry_way"),
      tripWayOptions: getDict("trip_traffic_way"),
      nucleinTestOptions: getDict("nuclein_test_case"),
      riskLevelOptions: getDict("risk_level"),
      // YesOrNoOptions: getDict("is_valid"),
      YesOrNoOptions: [
        { label: "否", value: 0 },
        { label: "是", value: 1 },
      ],
      YesOrNoOptions1: [
        { label: "否", value: "0" },
        { label: "是", value: "1" },
      ],

      queryParam: {
        name: "",
        cardNo: "",
        telPhone: "",
      },
      loading: false,
      photo: [],
    };
  },
  methods: {
    _getContact(pid) {
      // 获取联系人
      getContact(pid).then((res) => {
        console.log(res);
        let data = res.data.data;
        this.formData.emergencyContactType = data.emergencyContact1Type;

        this.formData.emergencyContactPhone = data.emergencyContact1Phone;
        this.formData.emergencyContactName = data.emergencyContact1Name;
      });
    },
    getName(value) {
      // this.$refs.nationCity.getCheckedNodes()
      console.log(this.$refs.nationCity.getCheckedNodes());
    },
    async show({ type, row, dialogTitle }) {
      if (row) {
        await this.getBaseInfo(row.personId);
        this._getContact(row.personId);
      }
      this.type = type;
      this.dialogVisible = true;
      this.dialogTitle = dialogTitle;
      this.queryParam = {
        name: "",
        cardNo: "",
        telPhone: "",
      };

      if (row) {
        this.$nextTick(() => {
          this.$refs.upload.getFiles();
        });
      }
    },
    save() {
      const obj = JSON.parse(JSON.stringify(this.formData));
      if (obj.destinationCity && obj.destinationCity.length > 0) {
        obj.destinationProvince = obj.destinationCity[0];
        obj.destinationCity = obj.destinationCity[1];
      } else {
        obj.destinationProvince = null;
        obj.destinationCity = null;
      }
      if (obj.nationCity && obj.nationCity.length > 0) {
        obj.nationCountry = obj.nationCity[0];
        const arr = obj.nationCity.slice(1, obj.nationCity.length);
        obj.nationProvince = arr[0];
        obj.nationCity = arr[1];
        obj.nationDistrict = arr[2] ? arr[2] : "";
        if (
          this.$refs.nationCity.getCheckedNodes()[0] &&
          this.$refs.nationCity.getCheckedNodes()[0].pathLabels.length > 0
        ) {
          const areaArr = this.$refs.nationCity.getCheckedNodes()[0].pathLabels;
          obj.nationArea = areaArr.join("/");
        }
        // this.$refs.nationCity.getCheckedNodes()
      } else {
        obj.nationCity = "";
      }
      const param = {
        jdglHotelMoveInto: this.jdglHotelMoveInto || {},
        jdglPersonInfo: {
          ...obj,
          routes: this.routeslist.map(
            ({ outAddr, getAddr, outDate, getDate, ...a }) => ({
              ...a,
              outAddrProvince: outAddr[0],
              outAddrCity: outAddr[1],
              getAddrProvince: getAddr[0],
              getAddrCity: getAddr[1],
              outDate: outDate
                ? moment(outDate).format("YYYY-MM-DD hh:mm:ss")
                : "",
              getDate: getDate
                ? moment(getDate).format("YYYY-MM-DD hh:mm:ss")
                : "",
            })
          ),
        },
      };
      this.$refs.upload.submit();
      savePersonEditor(param).then(() => {
        this.$message.success("提交成功");
        this.dialogVisible = false;
      });
    },
    editRouteCol(type) {
      switch (type) {
        case "add":
          return this.routeslist.push({
            outAddr: [],
            outDate: "",
            getAddr: [],
            getDate: "",
            tripTrafficWay: "",
          });
        case "move":
          return this.routeslist.pop();
        default:
          break;
      }
    },

    getOptionChildren(prama) {
      const arr = [];
      prama.forEach((a) => {
        if (a.children.length > 0) {
          arr.push({
            value: a.id,
            label: a.areaName,
            children: this.getOptionChildren(a.children),
          });
        } else {
          arr.push({ value: a.id, label: a.areaName });
        }
      });

      return arr;
    },

    async getBaseInfo(personId) {
      if (personId) {
        await getPersonInfoById(personId).then((res) => {
          this.jdglHotelMoveInto = res.data.data.jdglHotelMoveInto;

          const arr = [];
          if (res.data.data.jdglPersonInfo.destinationProvince) {
            arr.push(res.data.data.jdglPersonInfo.destinationProvince);
          }
          if (res.data.data.jdglPersonInfo.destinationCity) {
            arr.push(res.data.data.jdglPersonInfo.destinationCity);
          }
          const newArr = [];
          if (res.data.data.jdglPersonInfo.nationCountry) {
            newArr.push(res.data.data.jdglPersonInfo.nationCountry);
          }
          if (res.data.data.jdglPersonInfo.nationProvince) {
            newArr.push(res.data.data.jdglPersonInfo.nationProvince);
          }
          if (res.data.data.jdglPersonInfo.nationCity) {
            newArr.push(res.data.data.jdglPersonInfo.nationCity);
          }
          if (res.data.data.jdglPersonInfo.nationDistrict) {
            newArr.push(res.data.data.jdglPersonInfo.nationDistrict);
          }
          this.formData = res.data.data.jdglPersonInfo;
          this.formData.destinationCity = arr;

          this.formData.nationCity = newArr;
          console.log(this.formData.nationCity);
          this.routeslist = res.data.data.jdglPersonInfo.routes.map((a) => ({
            ...a,
            outAddr: [a.outAddrProvince, a.outAddrCity],
            getAddr: [a.getAddrProvince, a.getAddrCity],
          }));
        });
      }
    },
    getSynPersonInfo() {
      if (
        !this.queryParam.name &&
        !this.queryParam.cardNo &&
        !this.queryParam.telPhone
      ) {
        this.$message.error("请输入搜索条件！");
        return;
      }
      this.loading = true;
      getSynPersonInfo(this.queryParam)
        .then((res) => {
          console.log(res.data);
          if (res.data.data) {
            let d = res.data.data;

            this.formData["userId"] = d.userId;
            this.formData["dispatchNo"] = d.dispatchNo;
            this.formData["gender"] = d.gender;
            this.formData["comeCountryCity"] = d.comeCountryCity;
            this.formData["cardType"] = d.cardType;
            this.formData["age"] = d.age;
            this.formData["destinationProvince"] = d.destinationProvince;
            this.formData["destinationCity"] = d.destinationCity;
            this.formData["entryWay"] = d.entryWay;
            this.formData["passportNum"] = d.passportNum;
            this.formData["isAircrew"] = d.isAircrew;
            this.formData["nucleinTestCase"] = d.nucleinTestCase;
            this.formData["verifyResult"] = d.verifyResult;
            this.formData["jgDistrict"] = d.jgDistrict;
            this.formData["nationProvince"] = d.nationProvince;
            this.formData["entryTime"] = d.entryTime;
            this.formData["destinationAddr"] = d.destinationAddr;
            this.formData["dataSource"] = d.dataSource;
            this.formData["daSource"] = d.daSource;
            this.formData["daSourceId"] = d.daSourceId;
          } else {
            this.$message.error("未搜索到同步数据！");
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.multiple-manage-edit {
  .form-wrap {
    .add-route-btn {
      margin-top: 20px;
    }
    .el-form-item label {
      width: 100%;
    }
  }
  .searchPanel {
    .el-input {
      width: 350px;
    }
    .el-input-group__append {
      background-color: #2f54eb;
      color: #fff;
      font-weight: normal;
      &:hover,
      &:focus {
        background-color: #5976ef;
      }
    }
  }
  .searchPanel {
    .el-input {
      width: 350px;
    }
    .el-input-group__append {
      background-color: #2f54eb;
      color: #fff;
      font-weight: normal;
      &:hover,
      &:focus {
        background-color: #5976ef;
      }
    }
  }
}
</style>

<style lang="scss">
.multiple-manage-edit {
  .form-wrap {
    .el-form-item label {
      width: 100%;
    }
  }
}
</style>